<script setup lang="ts">
import { reactive, onMounted } from "vue";
import * as $journalfApi from "@/api/sci/paper/journal";
import * as $accountApi from "@/api/sci/account";
import * as $fileApi from "@/api/sci/file";
import * as $depApi from "@/api/sys/dep";
import { UploadProps, UploadRequestHandler, UploadRequestOptions, UploadUserFile } from "element-plus";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import _ from "lodash";
import saveAs from "file-saver";
import { Search } from "@element-plus/icons-vue";
defineOptions({
  name: "journal"
});

//数据初始化
onMounted(() => {
  _loadData();
  allDepartment();
});
//是否为查看表单（非修改）
const isLook = ref(true);
//是否是添加表单
const isAdd = ref(false);
// 详细信息表单开关
const centerDialogVisible = ref(false);
//导出属性选择项开关
const exportDialogVisible = ref(false);
const accountTree = ref();
//持久数据响应表单
const pageData: any = reactive({
  conferList: [],
  depList: [],
  pagination: {
    defaultPageSize: 10,
    total: 0
  }
});
//增改表单数据
const formInline = reactive({
  id: "",
  nickname: "",
  username: "",
  department: "",
  title: "",
  firstAuthor: "",
  otherAuthor: "",
  type: "",
  jourName: "",
  volume: "",
  page: "",
  jourTime: "",
  textNumber: "",
  bonus: "",
  point: "",
  level: "",
  impactFactor: "",
  path: "",
  status: "",
  remark: "",
  modified: ""
});

const rmSearchData = ref();
//搜索表单字段
const searchData = reactive({
  username: "",
  nickname: "",
  department: "",
  title: "",
  firstAuthor: "",
  otherAuthor: "",
  level: "",
  type: "",
  jourName: "",
  status: null,
  startTime: "",
  endTime: "",
  size: 10,
  current: 1
});
const formRules = {
  title: [{ required: true, message: "请输入题目", trigger: "blur" }],
  firstAuthor: [{ required: true, message: "请输入第一作者", trigger: "blur" }],
  confName: [{ required: true, message: "请输入会议名称", trigger: "blur" }],
  confTime: [{ required: true, message: "请输入会议时间", trigger: "blur" }]
};
//导出数据列表
const exportDataList = reactive({
  path: "",
  values: null,
  startTime: "",
  endTime: "",
  timeType: "jourTime"
});
// 简化后的树形结构类型
interface treeNode {
  label: string;
  value: string;
  point: string;
  bonus: string;
  children: treeNode[]; // 递归的子节点
}
// 当前选中的节点数据
const selectedNode = ref<treeNode | null>(null);

// transformData 函数：将原始数据转换为简化的格式
const transformData = (data: any[]): any[] => {
  return data.map(item => ({
    label: item.title,
    value: item.id,
    point: item.point,
    bonus: item.bonus,
    children:
      item.children && item.children.length > 0
        ? transformData(item.children)
        : []
  }));
};
// 根据ID查找节点
const findNodeById = (nodes: any[], id: string): any | null => {
  for (const node of nodes) {
    if (node.value === id) {
      return node; // 找到节点
    }
    if (node.children && node.children.length > 0) {
      const result = findNodeById(node.children, id);
      if (result) return result; // 递归查找子节点
    }
  }
  return null; // 如果没有找到
};
const handleNodeChange = (value: string) => {
  selectedNode.value = findNodeById(accountTree.value, value);
  formInline.type = selectedNode.value.label;
  formInline.bonus = selectedNode.value.bonus;
  formInline.point = selectedNode.value.point;
};
//添加会议论文请求
const _save = () => {
  $journalfApi
    .save(formInline)
    .then(() => {
      ElMessage({
        message: "添加成功",
        type: "success"
      });
    })
    .finally(() => {
      _loadData();
    });
};
//更新数据请求
const _update = () => {
  $journalfApi
    .update(formInline.id, formInline)
    .then(() => {
      ElMessage({
        message: "添加成功",
        type: "success"
      });
    })
    .catch(err => {
      ElMessage({
        message: "添加失败，请稍后再试" + err,
        type: "error"
      });
    })
    .finally(() => {
      _loadData();
    });
};
//删除数据请求
const _deleteByIds = () => {
  $journalfApi
    .del(selectedIds.value)
    .then(() => {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
    })
    .catch(err => {
      // 处理失败
      // console.error("删除失败:", err);
      ElMessage({
        message: "删除失败，请稍后再试" + err,
        type: "error"
      });
    })
    .finally(() => {
      _loadData();
    });
};
// 加载数据
const _loadData = () => {
  //去除空参数
  rmSearchData.value = _.omitBy(
    searchData,
    value =>
      value === null ||
      value === "" ||
      value === undefined ||
      (_.isObject(value) && _.isEmpty(value))
  );
  $journalfApi
    .queryPage(rmSearchData.value)
    .then((res: any) => {
      if (res.success) {
        // console.log(res.result);
        pageData.conferList = res.result.records;
        pageData.pagination.total = Number(res.result.total);
      }
    })
    .finally(() => {});
  $accountApi.treeList(window.location.hash.substring(2)).then(res => {
    accountTree.value = transformData(res.result[0].children);
    // console.log(accountTree.value);
  });
};
const _exportData = () => {
  console.log(selectedValues);

  const hash = window.location.hash;
  exportDataList.path = hash.substring(2);
  // console.log(checkedValue.value);
  if (checkedValue.value) {
    checkedValue.value.forEach(key => {
      if (values[key]) {
        selectedValues[key] = values[key]; // 赋值
      }
    });
  }
  exportDataList.values = selectedValues;
  // console.log(exportDataList);

  $fileApi.exportData(exportDataList).then(res => {
    const binaryData = [];
    binaryData.push(res);
    const blob = new Blob(binaryData); // fileStream 是文件流，一般从后台获取
    saveAs(blob, "exported-data.xlsx"); // fileName 保存文件的名称，需要带后缀
  }); // 释放 URL 对象
  checkedValue.value = [];
};

const allDepartment = () => {
  $depApi.queryList().then((res: any) => {
    if (res.success) {
      pageData.depList = res.result;
    }
  });
};

//添加数据打开框
const save = () => {
  // 重置 formInline 的所有值为 ""
  Object.keys(formInline).forEach(key => {
    formInline[key] = "";
  });
  isAdd.value = true;
  isLook.value = false;
  centerDialogVisible.value = true;
};
//更新数据
const updateRow = row => {
  isLook.value = false;
  isAdd.value = false;
  centerDialogVisible.value = true;
  Object.assign(formInline, row);
};
//删除功能实现
const selectedIds = ref<string[]>([]);
//删除多个文件
const deleteRows = () => {
  ElMessageBox.confirm("确认要删除多条记录吗？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      _deleteByIds();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
//删除单个文件
const deleteRow = (id: string) => {
  ElMessageBox.confirm("确认要删除该条记录吗？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      selectedIds.value = [];
      selectedIds.value.push(id);
      _deleteByIds();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
//数据导出
const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedValue = ref([]);
const selectedValues = reactive({});
const values = {
  department: "院系",
  username: "工号",
  nickname: "姓名",
  title: "题目",
  firstAuthor: "第一作者",
  otherAuthor: "其它作者",
  press: "出版商",
  confName: "会议名称",
  spot: "会议地点",
  confTime: "会议时间",
  level: "会议级别",
  type: "奖励类别",
  point: "业绩点",
  bonus: "科研奖励(万元)",
  textNumber: "字数(千)"
};
const handleCheckAllChange = (val: boolean) => {
  checkedValue.value = val ? Object.keys(values) : [];
  isIndeterminate.value = false;
  console.log(checkedValue.value);
};
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === Object.keys(values).length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < Object.keys(values).length;
  console.log(checkedValue.value);
};
//下载文件模块
const filename = ref(); //下载文件的名字
const selectedPaths = ref<string[]>([]); //下载文件路径的集合
//下载多个文件到zip
const downlFileRows = () => {
  _downlFile();
};
// 提取 path 并存储到 selectedPaths 中
const handleSelectionChange = (val: any) => {
  selectedPaths.value = val.map(item => item.path);
  selectedIds.value = val.map(item => item.id);
};
//下载单个文件
const downlFileRow = (path: string) => {
  selectedPaths.value = [];
  selectedPaths.value.push(path);
  _downlFile();
};
//下载文件具体实现
const _downlFile = () => {
  //判断是否为多个文件
  filename.value = "download.zip";
  if (selectedPaths.value.length == 1) {
    filename.value = "download.pdf";
  }
  //发送下载请求
  $fileApi.downloadFile(selectedPaths.value).then(res => {
    const binaryData = [];
    binaryData.push(res);
    const blob = new Blob(binaryData); // fileStream 是文件流，一般从后台获取
    saveAs(blob, filename.value); // fileName 保存文件的名称，需要带后缀
  });
};

//上传文件功能
const fileList = ref<UploadUserFile[]>([]); //文件上传列表
//超出文件数量限制
const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};
//上传文件具体实现
const _uploadFile: UploadRequestHandler = (param: UploadRequestOptions) => {
  return new Promise<void>((resolve, reject) => {
    const file = param.file;

    if (!(file instanceof File)) {
      console.error("上传的对象不是文件:", file);
      ElMessage.error("请选择一个有效的文件。");
      reject(new Error("无效的文件"));
      return;
    }

    const Form = new FormData();
    Form.append("file", file);

    $fileApi
      .uploadFile(Form)
      .then(res => {
        formInline.path = res.message;
        _update();
        resolve(); // 上传成功，调用 resolve
      })
      .catch(error => {
        console.error("上传文件时出错:", error);
        ElMessage.error("文件上传失败，请重试。");
        reject(error); // 上传失败，调用 reject
      });
  });
};

//预览文件
const previewFileRow = (row: any) => {
  Object.assign(formInline, row);
  _previewFile();
};
//预览文件具体实现
const _previewFile = () => {
  $fileApi
    .previewFile(formInline.path)
    .then((res: any) => {
      const binaryData = [];
      binaryData.push(res);
      const pdfUrl = window.URL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf" })
      );
      window.open(pdfUrl, "_blank");
    })
    .catch(error => {
      console.error("Error previewing file:", error);
    });
};

//双击表单方法
const dblClickRow = (row: any) => {
  isAdd.value = false;
  isLook.value = true;
  centerDialogVisible.value = true;
  Object.assign(formInline, row);
  console.log(formInline);
};

const handleSizeChange = (val: number) => {
  searchData.size = val;
  _loadData();
  // console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  searchData.current = val;
  _loadData();
  // console.log(`current page: ${val}`);
};
</script>

<template>
  <el-card :shadow="'never'">
    <div>
      <el-form
        :inline="true"
        :model="searchData"
        class="demo-form-inline"
        label-width="auto"
        width="100%"
      >
        <el-form-item label="题目" label-position="right" label-width="100px">
          <el-input v-model="searchData.title" style="width: 200px" clearable />
        </el-form-item>
        <el-form-item
          label="院系部门"
          label-position="right"
          label-width="100px"
        >
          <el-select
            filterable
            v-model="searchData.department"
            placeholder="请选择院系部门"
          >
            <el-option
              v-for="item in pageData.depList"
              :key="item.id"
              :value="item.department"
            />
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" label-position="right" label-width="100px">
          <el-col :span="11">
            <el-date-picker
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="开始日期"
              v-model="searchData.startTime"
              style="width: 100%"
            />
          </el-col>
          <el-col class="line" style="text-align: center" :span="2">——</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="结束日期"
              v-model="searchData.endTime"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="姓名" label-position="right" label-width="100px">
          <el-input
            v-model="searchData.nickname"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="第一作者"
          label-position="right"
          label-width="100px"
        >
          <el-input
            v-model="searchData.firstAuthor"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="其它作者"
          label-position="right"
          label-width="100px"
        >
          <el-input
            v-model="searchData.otherAuthor"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="期刊名称"
          label-position="right"
          label-width="150px"
        >
          <el-input v-model="searchData.jourName" clearable />
        </el-form-item>
        <el-form-item label="分区" label-position="right" label-width="100px">
          <el-select
            filterable
            v-model="searchData.level"
            placeholder=" "
            style="width: 100px"
          >
            <el-option label="无" value="无" />
            <el-option label="一区论文" value="一区论文" />
            <el-option label="二区论文" value="二区论文" />
            <el-option label="三区论文" value="三区论文" />
            <el-option label="四区论文" value="四区论文" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="奖励类别"
          label-position="right"
          label-width="100px"
        >
          <el-tree-select
            v-model="searchData.type"
            :data="accountTree"
            :render-after-expand="false"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item
          label="项目状态"
          label-position="right"
          label-width="150px"
        >
          <el-select
            filterable
            v-model="searchData.status"
            placeholder=""
            style="width: 120px"
          >
            <el-option label="待学校审核" value="3" />
            <el-option label="学校退回" value="4" />
            <el-option label="审核通过" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label-position="left" label-width="200px">
          <el-button
            type="primary"
            :icon="Search"
            style="width: 60px; margin-left: 40px"
            @click="_loadData"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="save()">
        <el-icon style="vertical-align: middle">
          <DocumentAdd />
        </el-icon>
        <span style="vertical-align: middle"> 添加 </span>
      </el-button>
      <el-button type="primary" @click="exportDialogVisible = true">
        <el-icon style="vertical-align: middle">
          <Document />
        </el-icon>
        <span style="vertical-align: middle"> 导出 </span>
      </el-button>

      <el-button type="primary" @click="downlFileRows">
        <el-icon style="vertical-align: middle">
          <Download />
        </el-icon>
        <span style="vertical-align: middle"> 批量下载附件 </span>
      </el-button>

      <el-button type="primary" @click="deleteRows()">
        <el-icon style="vertical-align: middle">
          <DocumentRemove />
        </el-icon>
        <span style="vertical-align: middle">批量删除 </span>
      </el-button>
      <el-button type="primary" @click="_loadData()">
        <el-icon style="vertical-align: middle">
          <RefreshRight />
        </el-icon>
        <span style="vertical-align: middle"> 刷新</span>
      </el-button>
    </div>

    <div class="table-wrapper" style="margin-top: 20px">
      <el-scrollbar>
        <el-table
          border
          @selection-change="handleSelectionChange"
          :data="pageData.conferList"
          stripe
          @row-dblclick="dblClickRow"
          :header-cell-style="{ padding: '3px' }"
          :row-style="{ height: '80px' }"
          :resizable="false"
          height="800"
        >
          <!-- <template #default="scope" > -->
          <el-table-column
            type="selection"
            width="30"
            align="center"
            :resizable="false"
          />
          <el-table-column
            width="60"
            label="序号"
            align="center"
            :resizable="false"
          >
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="department"
            label="院系部门"
            align="center"
            :resizable="false"
          />
          <el-table-column
            label="姓名（工号）"
            align="center"
            width="120"
            :resizable="false"
          >
            <template v-slot="scope">
              <span>{{ scope.row.nickname }}({{ scope.row.username }})</span>
              <!-- 显示工号 -->
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="论文题目"
            align="center"
            show-overflow-tooltip
            :resizable="false"
          />
          <el-table-column
            prop="firstAuthor"
            label="第一作者"
            align="center"
            :resizable="false"
          />
          <el-table-column
            prop="jourName"
            label="期刊名称"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column prop="type" label="奖励类别" align="center" />
          <el-table-column
            prop="point"
            label="业绩点"
            width="70"
            align="center"
          />
          <el-table-column
            prop="bonus"
            label="科研奖金（万）"
            width="70"
            align="center"
          />
          <el-table-column prop="level" label="分区" align="center" />
          <el-table-column
            prop="jourTime"
            label="会议时间"
            width="100"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.jourTime?.substring(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" />
          <el-table-column
            fixed="right"
            label="操作"
            width="170"
            align="center"
          >
            <template #default="scope">
              <div>
                <el-button
                  type="success"
                  bg
                  size="small"
                  @click="previewFileRow(scope.row)"
                  >预览</el-button
                >

                <el-button
                  type="info"
                  bg
                  size="small"
                  @click="downlFileRow(scope.row.path)"
                  >下载</el-button
                >
              </div>
              <div style="margin-top: 10px">
                <el-button
                  type="warning"
                  bg
                  size="small"
                  @click="updateRow(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  bg
                  size="small"
                  @click="deleteRow(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>

          <!-- </template> -->
        </el-table>
      </el-scrollbar>
      <div style="margin-top: 10px; margin-left: 20%">
        <el-pagination
          v-model:current-page="searchData.current"
          v-model:page-size="searchData.size"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 详细信息展示 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="详细信息"
      width="750"
      align-center
    >
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="auto"
        :disabled="isLook"
        :rules="formRules"
      >
        <el-form-item label="题目" label-position="right">
          <el-input
            v-model="formInline.title"
            type="textarea"
            style="width: 220px"
            clearable
          />
        </el-form-item>
        <el-form-item label="第一作者">
          <el-input v-model="formInline.firstAuthor" clearable />
        </el-form-item>
        <el-form-item label="其它作者">
          <el-input v-model="formInline.otherAuthor" clearable />
        </el-form-item>
        <el-form-item label="奖励类别">
          <el-tree-select
            v-model="formInline.type"
            :data="accountTree"
            :render-after-expand="false"
            @change="handleNodeChange"
          />
        </el-form-item>
        <el-form-item label="发表期刊">
          <el-input v-model="formInline.jourName" clearable />
        </el-form-item>
        <el-form-item label="卷期号">
          <el-input v-model="formInline.volume" clearable />
        </el-form-item>
        <el-form-item label="页码">
          <el-input v-model="formInline.textNumber" clearable />
        </el-form-item>
        <el-form-item label="会议时间">
          <el-col :span="14">
            <el-date-picker
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="发表时间"
              v-model="formInline.jourTime"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="字数（千）">
          <el-input v-model="formInline.textNumber" clearable />
        </el-form-item>
        <el-form-item label="科研奖励">
          <el-input v-model="formInline.bonus" clearable />
        </el-form-item>
        <el-form-item label="业绩点">
          <el-input v-model="formInline.point" clearable />
        </el-form-item>

        <el-form-item label="分区">
          <el-input v-model="formInline.level" clearable />
        </el-form-item>
        <el-form-item label="影响因子">
          <el-input v-model="formInline.impactFactor" clearable />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formInline.remark" clearable />
        </el-form-item>
        <el-form-item>
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action=""
            :auto-upload="true"
            :http-request="_uploadFile"
            accept=".pdf"
            :limit="1"
            :on-exceed="handleExceed"
            style="height: 100px"
          >
            <el-button type="primary" style="margin-top: 33px"
              >上传附件</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-if="isAdd">
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              _save();
            "
            >确认添加</el-button
          >
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              isLook = true;
            "
          >
            关闭
          </el-button>
        </div>
        <div class="dialog-footer" v-else>
          <el-button type="primary">
            <el-icon style="vertical-align: middle">
              <Filter />
            </el-icon>
            <span style="vertical-align: middle"> 审核</span>
          </el-button>
          <el-button type="primary" @click="_previewFile">
            <el-icon style="vertical-align: middle">
              <FullScreen />
            </el-icon>
            <span style="vertical-align: middle"> 预览</span>
          </el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >审批通过</el-button
          >
          <el-button
            type="primary"
            @click="centerDialogVisible = false"
            style="margin-right: 120px"
            >审批不通过</el-button
          >
          <el-button
            type="primary"
            v-if="!isLook"
            @click="
              centerDialogVisible = false;
              _update();
            "
            >确定修改</el-button
          >
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              isLook = true;
            "
          >
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 导出属性选择框 -->
    <el-dialog
      v-model="exportDialogVisible"
      title="选择属性"
      width="500"
      align-center
    >
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <el-checkbox-group
        v-model="checkedValue"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(key, value) in values"
          :key="value"
          :label="value"
          :value="value"
        >
          {{ key }}
        </el-checkbox>
      </el-checkbox-group>
      <el-row>
        <el-col :span="8">
          <el-date-picker
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="起始会议日期"
            v-model="exportDataList.startTime"
            style="width: 150px"
          />
        </el-col>
        <el-col class="line" style="text-align: center" :span="2">——</el-col>
        <el-col :span="9">
          <el-date-picker
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束会议日期"
            v-model="exportDataList.endTime"
            style="width: 150px"
          />
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="
              exportDialogVisible = false;
              _exportData();
            "
            >确认导出</el-button
          >
          <el-button type="primary" @click="exportDialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>
<!-- lang="scss" scoped -->
<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
//input   clearable  属性不撑开
:deep(.el-input__wrapper) {
  position: relative;
  .el-input__inner {
    padding-right: 18px;
  }
  .el-input__suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}
//table每行的的padding取消
:deep(.el-table .cell) {
  padding: 0px;
}
</style>
